<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form class="w-full" size="small">
            <n-form-item label="计划投入日期:" label-placement="left">
              <n-date-picker
                v-model:value="range"
                type="daterange"
                clearable
                :default-time="['00:00:00', '00:00:00']"
              />
            </n-form-item>
          </n-form>
        </n-gi>
        <n-gi>
          <n-form class="w-full" size="small">
            <n-form-item label="" label-placement="left">
              <n-button type="primary" :on-click="getProductUse">
                <template #icon><icon-mdi-map-search-outline /></template>
                查询
              </n-button>
            </n-form-item>
          </n-form>
        </n-gi>
      </n-grid>
      <n-space class="w-full"></n-space>
      <n-divider />
      <vxe-grid v-bind="productUseOptions"></vxe-grid>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchProductUse } from '@/service/api';

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);
const productUseOptions = reactive<VxeGridProps>({
  border: true,
  height: 500,
  showFooter: true,
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'parentLotName',
      title: '内部订单',
      width: '140px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'materialSpecName',
      title: '晶片料号',
      width: '180px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    { field: 'materialType', title: '物料类型', width: '100px' },
    { field: 'materialQuantity', title: '投料数量', width: '100px' },
    {
      field: 'subproductOkQuantity',
      title: '产出数量',
      width: '110px'
    },
    {
      field: 'productUse',
      title: '晶片利用率',
      width: '110px'
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getProductUse = async () => {
  const result = await fetchProductUse(
    dayjs(range.value[0]).format('YYYYMMDDHHmmss'),
    dayjs(range.value[1]).add(1, 'day').format('YYYYMMDDHHmmss')
  );
  if (result.data) {
    productUseOptions.data = result.data;
  }
};
</script>

<style scoped>
.my-filter-input {
  padding: 10px;
}
</style>
